<template>
  <el-dialog
    title="导入客户"
    width="35%"
    top="10vh"
    center
    :visible.sync="visible"
    @close="visible = !visible"
  >
    <TitleLine title="导入模板" :style="importStyle">
      <el-button type="text" @click="uploadFileTemplate" class="text-link-blue ft-14"
        >立即下载</el-button
      >
    </TitleLine>

    <el-form ref="elForm">
      <el-form-item class="text-center">
        <el-upload
          ref="upload"
          drag
          action="#"
          accept=".xls,.xlsx"
          :auto-upload="false"
          :multiple="false"
          :file-list="fileList"
          :http-request="uploadHttpRequest"
          :on-remove="fileRemove"
          :on-change="fileChange"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传
            <b style="color: #f56c6c">xls/xlsx 文件</b>
            ，且大小不超过
            <b style="color: #f56c6c">1MB</b>
            ，最大支持
            <b style="color: #f56c6c">10000</b>
            条记录
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label-width="0" class="text-center">
        <el-button @click="resetForm"> 取消 </el-button>
        <el-button
          type="primary"
          @click="submitUpload"
          :loading="loading"
          :disabled="uploadDisabled"
        >
          上传
        </el-button>
      </el-form-item>
    </el-form>
    <div v-show="errorBatchShipList.length" class="error-list">
      <p><span style="color: #fc4541">*</span><span>以下数据存在异常</span></p>
      <el-row class="mt-20 flex" v-for="(ele, index) in errorBatchShipList" :key="index">
        <el-col :span="8" align="left">{{ ele.nickName }}</el-col>
        <el-col :span="8" align="center">{{ ele.mobile }}</el-col>
        <el-col :span="8" align="right" style="color: #fc4541"
          >{{ ele.errorMessage }}，第{{ ele.errorRows }}行</el-col
        >
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'OrderBatchPopup',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: [],
      loading: false,
      uploadDisabled: true,
      errorBatchShipList: []
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    },
    importStyle() {
      return {
        display: 'flex',
        'justify-content': 'space-between'
      }
    }
  },
  methods: {
    async uploadHttpRequest(file) {
      this.loading = true
      const formData = new FormData()
      formData.append('file', file.file)
      formData.append('etpId', this.$route.query.id)
      const { status, data } = await this.$http.user.company.importUser(formData)
      if (status === 200) {
        this.errorBatchShipList = data
        this.$message.success(`导出成功，${data.length}条数据出现异常`)
        this.$emit('update')
      }
      this.fileList = []
      this.loading = false
    },
    // 文件发生改变
    fileChange(file, fileList) {
      if (fileList.length > 0) {
        this.uploadDisabled = false
        this.fileList = [fileList[fileList.length - 1]] // 展示最后一次选择的文件
      }
    },
    // 移除选择的文件
    fileRemove(file, fileList) {
      this.fileList = fileList
      if (fileList.length < 1) {
        this.uploadDisabled = true //未选择文件则禁用上传按钮
      }
    },
    // 取消
    resetForm() {
      this.$refs.upload.clearFiles() //清除上传文件对象
      this.fileList = [] //清空选择的文件列表
      this.visible = false
    },
    // 点击上传：手动上传到服务器，此时会触发组件的http-request
    submitUpload() {
      if (!this.fileList.length) return this.$message.error('请上传文件！')
      this.$refs.upload.submit()
    },
    // 下载模版
    uploadFileTemplate() {
      window.location.href =
        'https://mecha-mall.oss-cn-shenzhen.aliyuncs.com/template_excel/%E5%AE%A2%E6%88%B7%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls'
    }
  }
}
</script>
